<template>
    <ul v-for="item in One">
        <li>{{ item.Name }}</li>
        <li>{{ item.Age }}</li>
    </ul>

    <ul v-for="item in One">
        <li>{{ item.Name1 }}</li>
        <li>{{ item.Age1 }}</li>
    </ul>

    <ul v-for="item in One">
        <li>{{ item.Name2 }}</li>
        <li>{{ item.Age2 }}</li>
    </ul>

    <ul v-for="item in One">
        <li>{{ item.Name3 }}</li>
        <li>{{ item.Age3 }}</li>
    </ul>

    <ul v-for="item in One">
        <li>{{ item.Name4 }}</li>
        <li>{{ item.Age4 }}</li>
    </ul>

    <table class="table" border="1" >
        <thead >
            <tr>
                <th>用户借款编号</th>
                <th>借款用户账号</th>
                <th>借款款项名称</th>
                <th>借款金额</th>
                <th>剩余还款本金</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info">
                <td>{{ item.ID1 }}</td>
                <td>{{ item.ZName1 }}</td>
                <td>{{ item.Name1 }}</td>
                <td>{{ item.Money1}}</td>
                <td>{{ item.SMoney1 }}</td>
            </tr>
        </tbody>
        <tbody v-for="item in info">
            <tr>
                <td>{{ item.ID2 }}</td>
                <td>{{ item.ZName2 }}</td>
                <td>{{ item.Name2 }}</td>
                <td>{{ item.Money2 }}</td>
                <td>{{ item.SMoney2 }}</td>
            </tr>
        </tbody>
    </table>


    <h1>{{Name}}</h1>


</template>

<script setup lang="ts" >

import {ref} from "vue";

const One = ref([{
    Name:'张大',
    Age:'21',
    Name1:'李尔',
    Age1:'20',
    Name2:'刘珊',
    Age3:'22',
    Name4:'钱嗣',
    Age4:'25',
    Name5:'赵武',
    Age5:'24',
}])

const info = ref([{
    ID1:'1',
    ID2:'2',
    ZName1:'Zhangsan',
    ZName2:'Zhangsan',
    Name1:'八维助学金',
    Name2:'八维助学金',
    Money1:'400',
    Money2:'1000',
    SMoney1:'0',
    SMoney2:'10000',
}])

const Name = ref('双向数据绑定演示')

</script>